import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtTabs } from 'taro-ui';
import cssModule from './index.module.scss';

/**
 * @description 通讯录导航栏
 * @author Shawn
 */

// 组件接收的参数
interface NavigationTabsProps {
  tabs?: string[]; // 导航栏tabs标题
  tabIndex?: number; // 当前选中的 tab 索引
  handleTabChange?: (index: number) => void; // tab切换回调
}
export default function NavigationTabs({
  tabs = [],
  handleTabChange,
  tabIndex = 1,
}: NavigationTabsProps) {
  // 获取状态栏高度
  const statusBarHeight = Taro.getSystemInfoSync().statusBarHeight || 0;

  // 当前选中的 tab 索引
  const [current, setCurrent] = useState(tabIndex);

  useEffect(() => {
    setCurrent(tabIndex);
  }, [tabIndex]);

  // 处理 tab 切换
  const handleClick = (index: number) => {
    setCurrent(index);
    if (handleTabChange) {
      handleTabChange(index);
    }
  };

  return (
    <View style={{ paddingTop: `${statusBarHeight}px` }} className={cssModule.container}>
      <View className={cssModule.navbar}>
        <AtTabs
          current={current}
          tabList={tabs.map(tab => ({ title: tab }))}
          onClick={handleClick}
        />
      </View>
    </View>
  );
}
